<template>
  <div>
    <van-nav-bar
      title="添加操行"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <van-form @failed="onFailed">
      <van-field
        v-model="formData.className"
        is-link
        readonly
        name="picker"
        label="班级"
        placeholder="请选择班级"
        @click="showClass = true"
      />
      <van-popup v-model:show="showClass" position="bottom">
        <van-picker
          :columns="classes"
          @confirm="onConfirmClass"
          @cancel="showClass = false"
          :columns-field-names="{ text: 'className', value: 'classId' }"
        />
      </van-popup>

      <van-field
        v-model="formData.studentName"
        is-link
        readonly
        name="picker"
        label="学生"
        placeholder="请选择学生"
        @click="showStudent = true"
      />
      <van-popup v-model:show="showStudent" position="bottom">
        <van-picker
          :columns="students"
          @confirm="onConfirmStudent"
          @cancel="showStudent = false"
          :columns-field-names="{ text: 'studentName', value: 'studentId' }"
        />
      </van-popup>

      <van-field
        v-model="formData.typeName"
        is-link
        readonly
        name="picker"
        label="操行类型"
        placeholder="操行类型"
        @click="showType = true"
      />
      <van-popup v-model:show="showType" position="bottom">
        <van-picker
          :columns="types"
          @confirm="onConfirmType"
          @cancel="showType = false"
          :columns-field-names="{ text: 'typeName', value: 'typeId' }"
        />
      </van-popup>

      <van-field
        v-model="formData.ruleName"
        is-link
        readonly
        name="picker"
        label="操行规则"
        placeholder="操行规则"
        @click="showRule = true"
      />
      <van-popup v-model:show="showRule" position="bottom">
        <van-picker
          :columns="rules"
          @confirm="onConfirmRule"
          @cancel="showRule = false"
          :columns-field-names="{ text: 'ruleName', value: 'ruleId' }"
        />
      </van-popup>

      <van-field name="uploader" label="图片">
        <template #input>
          <van-uploader v-model="formData.images" max-count="2" />
        </template>
      </van-field>
      <!-- <van-field v-model="formData.start_time" is-link readonly name="calendar" label="起始时间" placeholder="点击选择日期"
        @click="showCalendar1 = true" />
      <van-calendar v-model:show="showCalendar1" @confirm="onConfirmStart" />

      <van-field v-model="formData.end_time" is-link readonly name="calendar" label="结束时间" placeholder="点击选择日期"
        @click="showCalendar2 = true" :rules="[{ validator, message: '请假原因必填' }]"/>
      <van-calendar v-model:show="showCalendar2" @confirm="onConfirmEnd" /> -->

      <van-cell-group>
        <van-field
          v-model="formData.scoring_notes"
          rows="2"
          autosize
          label="备注"
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
          :rules="[{ validator, message: '备注信息必填' }]"
        />
      </van-cell-group>

      <div style="margin: 16px">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          @click="addRecord"
        >
          添加
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import request from "@/utils/request";
import { useRouter } from "vue-router";
import { showNotify } from "vant";

const router = useRouter();

const formData = reactive({
  classId: "",
  studentId: "",
  studentName: "",
  scoringRuleId: "",
  scoringNotes: "",
  images: [],
});

const showClass = ref(false);
const showStudent = ref(false);
const showType = ref(false);
const showRule = ref(false);

let classes = [];
// 异步更新数据
request.post("/wx/teacher/records/classes/list", formData).then((resp) => {
  if (resp.data.code == 0) {
    classes = resp.data.rows;
  }
});

let students = [];

let types = [];
request.post("/wx/teacher/records/type/list", formData).then((resp) => {
  if (resp.data.code == 0) {
    types = resp.data.rows;
  }
});

let rules = [];

const validator = (str) => {
  return str.trim().length > 0;
};

const onConfirmClass = ({ selectedOptions }) => {
  console.log(selectedOptions);
  formData.classId = selectedOptions[0]?.classId;
  formData.className = selectedOptions[0]?.className;
  showClass.value = false;

  // 异步更新数据
  request.post("/wx/teacher/records/students/list", formData).then((resp) => {
    if (resp.data.code == 0) {
      students = resp.data.rows;
    }
  });
};

const onConfirmStudent = ({ selectedOptions }) => {
  formData.studentId = selectedOptions[0]?.studentId;
  formData.studentName = selectedOptions[0]?.studentName;
  showStudent.value = false;
};

const onConfirmType = ({ selectedOptions }) => {
  formData.typeName = selectedOptions[0]?.typeName;
  formData.typeId = selectedOptions[0]?.typeId;
  showType.value = false;

  // 异步更新数据
  request.post("/wx/teacher/records/rule/list", formData).then((resp) => {
    if (resp.data.code == 0) {
      rules = resp.data.rows;
    }
  });
};

const onConfirmRule = ({ selectedOptions }) => {
  formData.ruleName = selectedOptions[0]?.ruleName;
  formData.ruleId = selectedOptions[0]?.ruleId;
  showRule.value = false;
};

const onFailed = (errorInfo) => {
  console.log("failed", errorInfo);
};

const addRecord = () => {
  formData.scoringRuleId = formData.ruleId;
  formData.scoringNotes = formData.ruleName;

  if(formData.images[0]!=null){
    formData.image1 = formData.images[0].content;
  }
  if(formData.images[1]!=null){
    formData.image2 = formData.images[1].content;
  }

  formData.images = [];

  // 异步更新数据
  request.post("/wx/teacher/records/add", formData).then((resp) => {
    if (resp.data.code == 0) {
      router.push("/behavior");
    } else {
      showNotify("添加失败");
      console.log(resp.data.msg);
    }
  });
};
</script>
